<template>
	<view class="edit-address edit-address-index" style="width: 750rpx;position: relative;">
		<view class="edit-item flex-row">
			<view class="people label">
				收件人
			</view>
			<input type="text" v-model="address.recvPerson"/>
		</view>
		<view class="edit-item flex-row">
			<view class="phone label">
				手机号
			</view>
			<input type="text"  v-model="address.recvTel"/>
		</view>
		<view class="edit-item flex-row">
			<view class="address label"  @click="choseAddress">
				所在地区
			</view>
			<picker range-key="areaName" 
					class="address-chose" 
					mode="multiSelector" 
					:range="range" 
					@change="choseChange"
					@columnchange=cloumnChange>
				<view>{{address.fullPathCN?address.fullPathCN:'选择地区'}}</view>
			</picker>
		</view>
		<view class="edit-item flex-row">
			<view class="all-address label">
				详细地区
			</view>
			<input type="text"  v-model="address.recvAddr"/>
		</view>
		<!-- 设置为默认地址 -->
		<view style="width: 750rpx;height: 40rpx;margin-top:20px;
					 margin-left: 20rpx;">
			<label>
				<checkbox-group @change="checkChange">
					<checkbox value="1" :checked="address.recvDefault=='1'" color="red" />
					<text style="font-weight: bold;">设置为默认地址</text>
				</checkbox-group>
			</label>
		</view>
		<!-- 保存 -->
		<view class="edit-bottom">
			<view class="bottom-button position-center" @click="submit">
				保存
			</view>
		</view>
	</view>
</template>

<script>
	import { getCurrentInstance } from 'vue';
import request from '../../../utils/request.js';
	export default {
		data() {
			return {
				advMembersaddrId: '',
				advMembersId: '',
				title: '', // 页面的标题
				address: {
					recvDefault: 1,
				},
				range: [[{id: 1, name: '张三'},{id: 2, name: '小米'}], [{id: 1, name: '张三'},{id: 2, name: '小米'}]],
			}
		},
		onLoad(option) {
			this.advMembersaddrId = option.addressId;
			this.advMembersId = option.memberId;
			if(option.addressId){
				this.title = '修改地址';
				request.GET(`/system/membersaddr/${this.advMembersaddrId}`).then(response => {
					console.log("修改地址",response)
					this.address = response.data;
				})
			}else {
				this.title = '添加地址';
			}
			this.getFirstAddress();
		},
		watch: {
			title(newValue) {
				uni.setNavigationBarTitle({
					title: this.title
				})
			}
		},
		methods: {
			cloumnChange(e) {
				if(e.detail.column === 0){
					// 表示第一列改变了, 就要获取第二列的值
					const first = this.range[0][e.detail.value];
					request.GET('/system/areas/list', {
						parentAreasId: first.busAreasId
					}).then(response => {
					const rows = response.rows;
					this.range[1] = rows;
				})
				}
 			},
			// 选择地区完毕
			choseChange(e) {
				const value = e.detail.value;
				const chose = this.range[1][value[1]]
				const choseAddress = chose.fullPathCN;
				this.address.busAreasId = chose.busAreasId; // 地区id
				this.address.recvAddr = chose.fullPathCN; // 详细地区
				this.address.fullPathCN = chose.fullPathCN; // 市区信息
			},
			// 获取第一级列表
			getFirstAddress() {
				request.GET('/system/areas/list', {
					parentAreasId: 0
				}).then(response => {
					const rows = response.rows;
					this.range = [rows, []];
				})
			},
			// 提交地址信息
			submit() {
				if(this.title === '添加地址') {
					console.log(this.address)
					this.address.advMembersId = this.advMembersId;
					console.log(this.address, "地址信息")
					request.POST('/system/membersaddr', this.address).then(response => {
						console.log(response)
						uni.navigateBack();
					})
				}
				if(this.title === '修改地址') {
					request.PUT('/system/membersaddr', this.address).then(response => {
						console.log(response)
						uni.navigateBack();
					})
				}
			},
			checkChange(e) {
				console.log(e.detail.value)
				if(e.detail.value.length > 0){
					this.address.recvDefault = 1;
				} else {
					this.address.recvDefault = 0;
				}
			}
		}
	}
</script>

<style lang="less">
.edit-item {
	width: 700rpx;
	height: 50px;
	margin: 0 auto;
	align-items: flex-end;
	border-bottom: 2px solid #aaa;
	.label {
		width: 150rpx;
		text-align-last: justify; //最后一行文字的开头与内容盒子的左侧对齐，末尾与右侧对齐。
		color: #aaa;
	}
	input {
		width: 530rpx;
		height: 20px;
	}
	.address-chose {
		width: 530rpx;
		height: 20px;
	}
}
.edit-bottom {
	width: 750rpx;
	height: 100px;
	position: relative;
	.bottom-button {
		width: 710rpx;
		height: 40px;
		border-radius: 5px;
		text-align: center;
		line-height: 40px;
		color: white;
		background-color: royalblue;
		box-shadow: 0 0 10px 0 #ccc;
		&:active {
			background-color: cornflowerblue;
		}
	}
}
.scroll-first-view-text, .scroll-second-view-text {
	box-sizing: border-box;
	width: 100%;
	height: 40px;
	text-align: center;
	font-size: 20px;
	line-height: 40px;
}
.scroll-first-view-text-chose, .scroll-second-view-text-chose {
	font-size: 25px;
	color: limegreen;
}
</style>
